How I built the portfolio section of https://bsrikanth.com

Photo by Lauren Mancke on Unsplash

I am very happy, especially in this section. The portfolio list is not hardcoded. How lame would that be?😊 A GraphQL query fetches all my repositories information from my GitHub and will pass it down to my Portfolio.js component as props.

Now, in GitHub, I can pin the repositories to my profile that I am very proud of. It would be awesome if I can show my pinned repositories at the beginning of my portfolio list too. So, I wrote a logic that sorts my portfolio projects bringing my pinned projects to the beginning of the list.

We need one more piece of data before we can start rendering my portfolios on to the dom. The filter options. These are… nope, not hardcoded. These are dynamic too. I wrote a logic that fetches all the labels in every repository I have and then sorts them by their occurrence of frequency. In other words, the more frequent I use a technology, the more likely it is going to end up at the beginning of my filter options. I am also limiting the number of dynamic filter options to only 3. With two hardcoded options ‘ALL’ & ‘OTHER’ where one displays all my GitHub repositories without any filters and the ‘OTHER’ filter displays repositories which have less frequent labels.

Finally, I am looping my portfolio projects array and rendering each item with my PortfolioCard.js template. On click on any Portfolio Card, that particular repository’s README.md contents will be fetched with again a GRAPHQL query and displayed in a slider that users can close by clicking the X icon on the top right corner or can just hit the ESC key on their keyboards.

The syntax highlighting in the Project Content page is powered by PrismJS. I am also using shuffleJS to achieve the cool animation effects while shuffling.

Last but not least, the view more button. I don’t want to render all my portfolio items at a time. That will clutter the page. So, I am displaying only 3 items at a time on medium and small devices and 6 items on large devices. If the user wishes to view more, they can click on the View More button to render 3 more items on a single click. It has a nice counter for convenience too.

At the time of this writing, here is how my Portfolio section looks

Hope you have enjoyed this article.

Please let me know if you have any questions in the comments below.

Peace!!